<template>
    <div>
        <!-- 布局 -->
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">案例系统</el-header>
            <el-container>
              <el-aside width="200px">
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item index="1-1">部门管理</el-menu-item>
                            <el-menu-item index="1-2">员工管理</el-menu-item>
                    </el-submenu>
                  </el-menu>
                </el-aside>
              <el-main>
                <!-- 表单 -->
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="姓名">
                      <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                      <el-select v-model="searchForm.gender" placeholder="性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>

                <!-- 表格 -->
                <el-table :data="tableData" border>
                    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="image" label="图像" width="180"></el-table-column>
                    <!-- <template slot-scope="scope">
                        {{ scope.row.image = "../../assert/logo.png"}}
                    </template> -->
                    <el-table-column prop="gender" label="性别" width="140">
                        <template slot-scope="scope">
                            {{ scope.row.gender == 1 ? '男' : '女' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="danger" size="mini">删除</el-button>
                    </el-table-column> 
                </el-table>
                <br>
                <!-- 分页条 -->
                <el-pagination background layout="sizes, prev, pager, next, jumper, total" 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="1000"> 
                </el-pagination>
              </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // import axios from 'axios';

    export default {
        // components: {axios},
        data() {
            return {
                tableData: [ {
                    "name": "谢逊",
                    "image": "../../asserts/logo.png",
                    "gender": 1,
                }, {
                    "name": "金毛狮王",
                    "image": "../../asserts/logo.png",
                    "gender": 1,
                }],
                searchForm: {
                    name: "",
                    gender: ""
                }
            }
        },
        methods: {
            handleSizeChange:function(val) {
                alert("每页记录数发生变化" + val);
            },
            handleCurrentChange:function(val) {
                alert("页码发生变化" + val);
            }, 

            onSubmit: function() {
                alert("查询数据");
            }
        },
        mounted() {
            //发送异步请求
            /* axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
                this.tableData = result.data.data;
            }); */
        },
    }
</script>

<style>

</style>